<template>
  <div>
    <el-form>
      <el-form-item label="上传封面图片">
        <el-upload
          ref="upload"
          action="#"
          class="upload-demo"
          accept="image/png,image/gif,image/jpg,image/jpeg"
          :limit="1"
          :auto-upload="false"
          :http-request="handleUploadAvatar"
          :before-upload="handleBeforeUpload"
          :on-remove="deleteoic"
          :on-change="handleChange"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <div class="logo_img">
          <i v-if="isHidden" class="el-icon-picture logo_img_title"></i>
          <img v-else :src="dialogImageUrl" width="100%" height="100%" />
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="dialogFormSure"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addArticlePic } from "../api/article";

export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      isHidden: true,
    };
  },
  methods: {
    deleteoic() {
      this.dialogImageUrl = "";
      this.isHidden = true;
    },
    handleBeforeUpload(file) {
      console.log("before");
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
      }
      let size = file.size / 1024 / 1024 / 2;
      if (size > 2) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小必须小于2M",
        });
      }
    },
    handleChange(file) {
      let url = "";
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file.raw);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file.raw);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file.raw);
      }
      this.dialogImageUrl = url;
      this.isHidden = false;
    },
    handleUploadAvatar(file) {
      console.log(file.file);
      const fileObj = file.file;
      var id = localStorage.getItem("imgId");
      if (id != null) {
        const form1 = new FormData();
        form1.append("imageFile", fileObj);
        form1.append("id", id);
        addArticlePic(form1).then(({ data }) => {
          console.log(data);
          if (data.code == 200) {
            this.$message.success(data.msg);
            localStorage.removeItem("imgId");
            this.$router.go(-1);
          } else {
            this.$message.error(data.msg);
          }
        });
      } else {
        this.$message.error("上传失败");
      }
    },
    dialogFormSure() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style scoped>
.el-form {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.el-icon-plus {
  line-height: 300px;
}

.upload-demo /deep/ .el-upload--picture-card {
  width: 500px;
  height: 300px;
}
.logo_img {
  border: 3px dashed rgb(172, 208, 241);
  width: 500px;
  height: 350px;
}
.logo_img .logo_img_title {
  line-height: 350px;
  display: flex;
  justify-content: center;
  font-size: 20px;
}

.logo_img img {
  width: 500px;
}
</style>